import React, { Component } from "react";
import { Row, Col } from "antd";
import PropTypes from "prop-types";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import { createSelect, createDataSourceOption } from "../factory";

class CheckboxProperties extends Component {
  static propTypes = {
    data: PropTypes.object.isRequired,
    node: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    onUpdate: PropTypes.func.isRequired,
  };

  render() {
    const { data, onChange, onUpdate } = this.props;
    const getSelectOptions = (property, options) => ({
      size: "small",
      onChange: onUpdate,
      data,
      property,
      getter: (data, property) => data.get(property),
      options,
    });
    const dataSourceOption = {
      onChange,
      onUpdate,
      data,
    };
    return (
      <>
        <Row className="row">
          <Col span={10}>
            <span className="label">
              <FormattedMessage {...messages.propertyPanelDirection} />
            </span>
          </Col>
          <Col span={14}>
            {createSelect(
              getSelectOptions("direction", [
                { label: "水平", value: "horizon" },
                { label: "垂直", value: "vertical" },
              ])
            )}
          </Col>
        </Row>
        {createDataSourceOption(dataSourceOption)}
      </>
    );
  }
}

export default CheckboxProperties;
